<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Widgets | Nyasa - Responsive admin template.</title>
        <link rel="shortcut icon" href="img/favicon.ico">
        <!--STYLESHEET-->
        <!--=================================================-->
        <!--Roboto Slab Font [ OPTIONAL ] -->
        <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400" rel="stylesheet">
        <!--Bootstrap Stylesheet [ REQUIRED ]-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--Jasmine Stylesheet [ REQUIRED ]-->
        <link href="css/style.css" rel="stylesheet">
        <!--Font Awesome [ OPTIONAL ]-->
        <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <!--Switchery [ OPTIONAL ]-->
        <link href="plugins/switchery/switchery.min.css" rel="stylesheet">
        <!--Bootstrap Select [ OPTIONAL ]-->
        <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
        <!--Jquery Tag It [ OPTIONAL ]-->
        <link href="plugins/tag-it/jquery.tagit.css" rel="stylesheet">
        <!--Summernote [ OPTIONAL ]-->
        <link href="plugins/summernote/summernote.min.css" rel="stylesheet">
        <!--Demo [ DEMONSTRATION ]-->
        <link href="css/demo/jasmine.css" rel="stylesheet">
        <!--SCRIPT-->
        <!--=================================================-->
        <!--Page Load Progress Bar [ OPTIONAL ]-->
        <link href="plugins/pace/pace.min.css" rel="stylesheet">
        <script src="plugins/pace/pace.min.js"></script>
    </head>
    <body>
        <div id="container" class="effect mainnav-lg navbar-fixed mainnav-fixed">
            <!--NAVBAR-->
            <!--===================================================-->
            <header id="navbar">
                <div id="navbar-container" class="boxed">
                    <!--Brand logo & name-->
                    <!--================================-->
                    <div class="navbar-header">
                        <a href="index.html" class="navbar-brand">
                            <i class="fa fa-cube brand-icon"></i>
                            <div class="brand-title">
                                <span class="brand-text">Nyasa</span>
                            </div>
                        </a>
                    </div>
                    <!--================================-->
                    <!--End brand logo & name-->
                    <!--Navbar Dropdown-->
                    <!--================================-->
                    <div class="navbar-content clearfix">
                        <ul class="nav navbar-top-links pull-left">
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="tgl-menu-btn">
                                <a class="mainnav-toggle" href="ui-widgets.html#"> <i class="fa fa-navicon fa-lg"></i> </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Navigation toogle button-->
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="profilebtn" class="hidden-xs">
                                <a href="JavaScript:void(0);"> <i class="fa fa-user fa-lg"></i> </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--Messages Dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="ui-widgets.html#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-envelope fa-lg"></i> <span class="badge badge-header badge-warning">9</span> 
                                </a>
                                <!--Message dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no">You have 3 messages.</div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <img src="img/av2.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Andy sent you a message</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <img src="img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Lucy sent you a message</div>
                                                            <small class="text-muted">30 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <img src="img/av3.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Jackson sent you a message</div>
                                                            <small class="text-muted">40 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <img src="img/av6.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Donna sent you a message</div>
                                                            <small class="text-muted">5 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <img src="img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Lucy sent you a message</div>
                                                            <small class="text-muted">Yesterday</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <img src="img/av3.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Jackson sent you a message</div>
                                                            <small class="text-muted">Yesterday</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="ui-widgets.html#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Messages </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End message dropdown-->
                            <!--Notification dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="ui-widgets.html#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell fa-lg"></i> <span class="badge badge-header badge-danger">5</span> </a>
                                <!--Notification dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no"> Notification </div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-primary"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New comments waiting approval</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <span class="badge badge-success pull-right">90%</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-danger"> <i class="fa fa-hdd-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">HDD is full</div>
                                                            <small class="text-muted">50 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-info"> <i class="fa fa-file-word-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Write a news article</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <span class="label label-danger pull-right">New</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-purple"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Comment Sorting</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-widgets.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-success"> <i class="fa fa-user fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New User Registered</div>
                                                            <small class="text-muted">4 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="ui-widgets.html#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End notifications dropdown-->
                        </ul>
                        <ul class="nav navbar-top-links pull-right">
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs" id="toggleFullscreen">
                                <a class="fa fa-expand" data-toggle="fullscreen" href="ui-widgets.html#" role="button">
                                <span class="sr-only">Toggle fullscreen</span>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--User dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="dropdown-user" class="dropdown">
                                <a href="ui-widgets.html#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                    <span class="pull-right"> <img class="img-circle img-user media-object" src="img/av1.png" alt="Profile Picture"> </span>
                                    <div class="username hidden-xs">John Doe</div>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right with-arrow">
                                    <!-- User dropdown menu -->
                                    <ul class="head-list">
                                        <li>
                                            <a href="ui-widgets.html#"> <i class="fa fa-user fa-fw fa-lg"></i> Profile </a>
                                        </li>
                                        <li>
                                            <a href="ui-widgets.html#">  <i class="fa fa-envelope fa-fw fa-lg"></i> Messages </a>
                                        </li>
                                        <li>
                                            <a href="ui-widgets.html#">  <i class="fa fa-gear fa-fw fa-lg"></i> Settings </a>
                                        </li>
                                        <li>
                                            <a href="ui-widgets.html#"> <i class="fa fa-sign-out fa-fw"></i> Logout </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End user dropdown-->
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs">
                                <a id="demo-toggle-aside" href="ui-widgets.html#">
                                <i class="fa fa-navicon fa-lg"></i>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Navigation toogle button-->
                        </ul>
                    </div>
                    <!--================================-->
                    <!--End Navbar Dropdown-->
                </div>
            </header>
            <!--===================================================-->
            <!--END NAVBAR-->
            <div class="boxed">
                <!--CONTENT CONTAINER-->
                <!--===================================================-->
                <section id="content-container">
                    <div id="profilebody">
                        <div class="pad-all animated fadeInDown">
                            <div class="row">
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Users</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-users fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Inbox</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-envelope fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">FAQ</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-headphones fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Settings</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-cogs fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Calender</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-calendar fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Pictures</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-picture-o fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <header class="pageheader">
                        <h3><i class="fa fa-home"></i> Widgets </h3>
                        <div class="breadcrumb-wrapper">
                            <span class="label">You are here:</span>
                            <ol class="breadcrumb">
                                <li> <a href="ui-widgets.html#"> Home </a> </li>
                                <li class="active"> Widgets </li>
                            </ol>
                        </div>
                    </header>
                    <!--Page content-->
                    <!--===================================================-->
                    <div id="page-content">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xm-12">
                                <!--Registered User-->
                                <div class="panel media pad-all">
                                    <div class="media-left">
                                        <span class="icon-wrap icon-wrap-sm icon-circle bg-success">
                                        <i class="fa fa-user fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-2x mar-no text-thin text-right">241</p>
                                        <p class="h5 mar-no text-right">Registered User</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xm-12">
                                <!--New Order-->
                                <div class="panel media pad-all">
                                    <div class="media-left">
                                        <span class="icon-wrap icon-wrap-sm icon-circle bg-info">
                                        <i class="fa fa-shopping-cart fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-2x mar-no text-thin text-right">543</p>
                                        <p class="h5 mar-no text-right">New Order</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xm-12">
                                <!--Comments-->
                                <div class="panel media pad-all">
                                    <div class="media-left">
                                        <span class="icon-wrap icon-wrap-sm icon-circle bg-warning">
                                        <i class="fa fa-comment fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-2x mar-no text-thin text-right">34</p>
                                        <p class="h5 mar-no text-right">Comments</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xm-12">
                                <!--Sales-->
                                <div class="panel media pad-all">
                                    <div class="media-left">
                                        <span class="icon-wrap icon-wrap-sm icon-circle bg-danger">
                                        <i class="fa fa-dollar fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-2x mar-no text-thin text-right">654</p>
                                        <p class="h5 mar-no text-right">Sales</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="panel">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-9 col-sm-9 col-xs-10">
                                                <h3 class="mar-no"> <span class="counter">50.5 GB</span></h3>
                                                <p class="mar-ver-5"> Traffic this month </p>
                                            </div>
                                            <div class="col-md-3 col-sm-3 col-xs-2"> <i class="fa fa-shopping-cart fa-3x text-info"></i> </div>
                                        </div>
                                        <div class="progress progress-striped progress-sm">
                                            <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar"> <span class="sr-only">60% Complete</span> </div>
                                        </div>
                                        <p> 4% higher than last month </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="panel">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-9 col-sm-9 col-xs-10">
                                                <h3 class="mar-no"> <span class="counter">26.8%</span></h3>
                                                <p class="mar-ver-5">Server Load</p>
                                            </div>
                                            <div class="col-md-3 col-sm-3 col-xs-2"> <i class="fa fa-envelope fa-3x text-danger"></i> </div>
                                        </div>
                                        <div class="progress progress-striped progress-sm">
                                            <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-danger"> <span class="sr-only">60% Complete</span> </div>
                                        </div>
                                        <p> 4% higher than last month </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="panel widget">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-9 col-sm-9 col-xs-10">
                                                <h3 class="mar-no"> <span class="counter">$14,500</span></h3>
                                                <p class="mar-ver-5"> Total Sales </p>
                                            </div>
                                            <div class="col-md-3 col-sm-3 col-xs-2"> <i class="fa fa-users fa-3x text-success"></i> </div>
                                        </div>
                                        <div class="progress progress-striped progress-sm">
                                            <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-success"> <span class="sr-only">60% Complete</span> </div>
                                        </div>
                                        <p> 4% higher than last month </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="panel widget">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-9 col-sm-9 col-xs-10">
                                                <h3 class="mar-no"> <span class="counter">65</span>%</h3>
                                                <p class="mar-ver-5"> Search Traffic</p>
                                            </div>
                                            <div class="col-md-3 col-sm-3 col-xs-2"> <i class="fa fa-search fa-3x text-info"></i> </div>
                                        </div>
                                        <div class="progress progress-striped progress-sm">
                                            <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning"> <span class="sr-only">60% Complete</span> </div>
                                        </div>
                                        <p> 4% higher than last month </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-md-6 col-xs-12">
                                <div class="widgetbox widgetbox-default widgetbox-item-icon">
                                    <div class="widgetbox-item-right widgetbox-icon-info"> <span class="fa fa-line-chart"></span> </div>
                                    <div class="widgetbox-data-left">
                                        <div class="widgetbox-int"> 45000 </div>
                                        <p> Unique Visitor </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-md-6 col-xs-12">
                                <div class="widgetbox widgetbox-default widgetbox-item-icon">
                                    <div class="widgetbox-item-right widgetbox-icon-warning"> <span class="fa fa-search"></span> </div>
                                    <div class="widgetbox-data-left">
                                        <div class="widgetbox-int"> 65% </div>
                                        <p> Search Traffic </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-md-6 col-xs-12">
                                <div class="widgetbox widgetbox-default widgetbox-item-icon">
                                    <div class="widgetbox-item-right widgetbox-icon-danger"> <span class="fa fa-users"></span> </div>
                                    <div class="widgetbox-data-left">
                                        <div class="widgetbox-int"> 13500 </div>
                                        <p> Users </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-md-6 col-xs-12">
                                <div class="widgetbox widgetbox-default widgetbox-item-icon">
                                    <div class="widgetbox-item-right widgetbox-icon-danger"> <span class="fa fa-shopping-cart"></span> </div>
                                    <div class="widgetbox-data-left">
                                        <div class="widgetbox-int"> 1587 </div>
                                        <p> Total Sales </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-sm-6 col-md-6 col-xs-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Site Statistics </h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Flot Line Chart placeholder-->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div id="demo-site-statistics" style="height:175px"></div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                    <div class="panel-footer">
                                        <div class="text-bold"> <i class="fa fa-users"></i> New Visitors <span class="pull-right">50645</span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-md-6 col-xs-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Order Statistics </h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Flot Line Chart placeholder-->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div id="demo-order-statistics" style="height:175px"></div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                    <div class="panel-footer">
                                        <div class="text-bold"> <i class="fa fa-shopping-cart"></i> New Orders <span class="pull-right">$60647</span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-md-6 col-xs-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Site Statistics </h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Flot Line Chart placeholder-->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div id="demo-sales-statistics" style="height:175px"></div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                    <div class="panel-footer">
                                        <div class="text-bold"> <i class="fa fa-money"></i> Total Orders <span class="pull-right">$60647</span> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3 col-sm-12 col-md-6 col-xs-12">
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel widget">
                                    <div class="widget-header bg-purple">
                                        <img class="widget-bg img-responsive" src="img/thumbs/img3.jpg" alt="Image">
                                    </div>
                                    <div class="widget-body text-center">
                                        <img alt="Profile Picture" class="widget-img img-border-light" src="img/av4.png">
                                        <h4 class="mar-no">Lucy Moon</h4>
                                        <p class="text-muted mar-btm">Art Designer</p>
                                    </div>
                                    <ul class="menu-items">
                                        <li>
                                            <a href="javascript:void(0)" class="clearfix">
                                            <i class="fa fa-bell-o fa-lg"></i> New notifications
                                            <span class="label label-danger label-circle pull-right">82</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" class="clearfix">
                                            <i class="fa fa-user fa-lg"></i> Edit profile
                                            <span class="label label-success label-circle pull-right">13</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" class="clearfix">
                                            <i class="fa fa-calendar fa-lg"></i> Calendar
                                            <span class="label label-warning label-circle pull-right">12</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" class="clearfix">
                                            <i class="fa fa-envelope fa-lg"></i> New message
                                            <span class="label label-info label-circle pull-right">44</span>
                                            </a>
                                        </li>
                                    </ul>
                                    <!--===================================================-->
                                </div>
                            </div>
                            <div class="col-lg-5 col-sm-12 col-md-6 col-xs-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Quick Post </h3>
                                    </div>
                                    <div class="panel-body pad-no">
                                        <!-- Multiple Select Choosen -->
                                        <!--===================================================-->
                                        <form class="form-horizontal form-bordered">
                                            <!--Summernote-->
                                            <!--===================================================-->
                                            <div id="demo-summernote"></div>
                                            <!--===================================================-->
                                            <!-- End Summernote -->
                                            <div class="pad-all text-right"> 
                                                <button class="btn btn-info"><i class="fa fa-send"></i> Send </button>
                                                <button class="btn btn-default"><i class="fa fa-save"></i> Draft </button>
                                                <button class="btn btn-default"><i class="fa fa-remove"></i> Discard </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-12 col-md-6 col-xs-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Quick Draft </h3>
                                    </div>
                                    <!--No Label Form-->
                                    <!--===================================================-->
                                    <form class="form-horizontal">
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-md-4 mar-btm">
                                                    <input type="text" class="form-control" placeholder="Name">
                                                </div>
                                                <div class="col-md-4 mar-btm">
                                                    <input type="email" class="form-control" placeholder="Email">
                                                </div>
                                                <div class="col-md-4 mar-btm">
                                                    <input type="url" class="form-control" placeholder="Website">
                                                </div>
                                            </div>
                                            <textarea placeholder="Message" rows="11" class="form-control"></textarea>
                                        </div>
                                        <div class="panel-footer text-right">
                                            <button class="btn btn-primary">Send message</button>
                                        </div>
                                    </form>
                                    <!--===================================================-->
                                    <!--End No Label Form-->
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-sm-12 col-md-6 col-xs-12">
                                <div class="panel">
                                    <div class="panel-body np">
                                        <!-- Marker -->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div id="demo-overlays-map" style="height:300px"></div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div class="col-md-5 mar-ver">
                                            <div class="pull-left">
                                                <h4> Contact Us! </h4>
                                            </div>
                                        </div>
                                        <div class="col-md-7 text-right mar-ver">
                                            <h4 class="nm"> Line Studio </h4>
                                            <small class="text-muted"><i class="fa fa-map-marker"></i> 86 Washington Sq, San Jose, CA 95192, United States </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-12 col-md-6 col-xs-12">
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel text-center">
                                    <div class="panel-body bg-info">
                                        <img alt="Avatar" class="img-lg img-circle img-border mar-btm" src="img/av5.png">
                                        <h4 class="mar-no">Brenda Fuller</h4>
                                        <p>Project manager</p>
                                    </div>
                                    <div class="panel-footer">
                                        <ul class="nav nav-section nav-justified">
                                            <li>
                                                <div class="section">
                                                    <h4> 12.5k </h4>
                                                    <p class="text-muted">Followers</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <h4> 1853 </h4>
                                                    <p class="text-muted">Following</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <h4> 3451 </h4>
                                                    <p class="text-muted">Tweets</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--===================================================-->
                            </div>
                            <div class="col-lg-3 col-sm-12 col-md-6 col-xs-12">
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel widget">
                                    <div class="widget-header bg-purple">
                                        <img class="widget-bg img-responsive" src="img/thumbs/img3.jpg" alt="Image">
                                    </div>
                                    <div class="widget-body text-center">
                                        <img alt="Profile Picture" class="widget-img img-border-light" src="img/av4.png">
                                        <h4 class="mar-no">Lucy Moon</h4>
                                        <p class="text-muted mar-btm">Art Designer</p>
                                    </div>
                                    <div class="panel-footer">
                                        <ul class="nav nav-section nav-justified">
                                            <li>
                                                <div class="section">
                                                    <h4> 12.5k </h4>
                                                    <p class="text-muted">Followers</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <h4> 1853 </h4>
                                                    <p class="text-muted">Following</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <h4> 3451 </h4>
                                                    <p class="text-muted">Tweets</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <!--===================================================-->
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-sm-6 col-md-6 col-xs-12">
                                <div class="userWidget-1">
                                    <div class="avatar-bg">
                                        <img src="img/av7.png" alt="avatar">
                                        <div class="name osLight"> Jane Smith </div>
                                    </div>
                                    <div class="title"> Web Designer </div>
                                    <div class="address"> Los Angeles, CA, USA </div>
                                    <ul class="fullstats">
                                        <li> <span>280</span>Followers </li>
                                        <li> <span>345</span>Following </li>
                                        <li> <span>36</span>Posts </li>
                                    </ul>
                                    <div class="clearfix"> </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-md-6 col-xs-12">
                                <div class="userWidget-1">
                                    <div class="avatar bg-primary">
                                        <img src="img/av7.png" alt="avatar">
                                        <div class="name osLight"> Jane Smith </div>
                                    </div>
                                    <div class="title"> Web Designer </div>
                                    <div class="address"> Los Angeles, CA, USA </div>
                                    <ul class="fullstats">
                                        <li> <span>280</span>Followers </li>
                                        <li> <span>345</span>Following </li>
                                        <li> <span>36</span>Posts </li>
                                    </ul>
                                    <div class="clearfix"> </div>
                                </div>
                                <!--Extra small weather widget-->
                                <!--===================================================-->
                                <div class="panel media middle">
                                    <div class="media-left bg-primary pad-all">
                                        <canvas id="demo-weather-xs-icon-1" width="48" height="48"></canvas>
                                    </div>
                                    <div class="media-body pad-lft">
                                        <p class="text-2x mar-no text-thin">32&#176;</p>
                                        <p class="text-muted mar-no">Sunny</p>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Extra small weather widget-->
                                <!--Extra small weather widget-->
                                <!--===================================================-->
                                <div class="panel media middle">
                                    <div class="media-left pad-all">
                                        <canvas id="demo-weather-xs-icon-2" width="48" height="48"></canvas>
                                    </div>
                                    <div class="media-body pad-lft">
                                        <p class="text-2x mar-no text-thin text-mint">25&#176;</p>
                                        <p class="text-muted mar-no">Partly Cloudy Day</p>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Extra small weather widget-->
                            </div>
                            <div class="col-lg-4 col-sm-6 col-md-6 col-xs-12">
                                <!--Large weather widget-->
                                <!--===================================================-->
                                <div id="demo-weather-widget-lg" class="panel weather-panel-bg text-center">
                                    <div class="panel-body">
                                        <!--Widget heading-->
                                        <div class="media">
                                            <div class="media-left text-light">
                                                <i class="fa fa-map-marker fa-3x"></i>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="mar-no text-left text-light">San Jose, CA</h4>
                                                <p class="text-left text-light">Today</p>
                                            </div>
                                        </div>
                                        <!--Widget body-->
                                        <div class="row pad-top">
                                            <div class="col-xs-6">
                                                <canvas id="demo-weather-lg-icon-1" width="98" height="98"></canvas>
                                            </div>
                                            <div class="col-xs-6">
                                                <p class="text-4x text-light">12&#176;</p>
                                                <p class="text-light">Rainy Day</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Large weather widget-->
                                <!--Large weather widget-->
                                <!--===================================================-->
                                <div id="demo-weather-widget" class="panel weather-panel-bg2 text-center">
                                    <div class="panel-body">
                                        <!--Widget heading-->
                                        <div class="media">
                                            <div class="media-left text-light">
                                                <i class="fa fa-map-marker fa-3x"></i>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="mar-no text-left text-light">San Jose, CA</h4>
                                                <p class="text-left text-light">Today</p>
                                            </div>
                                        </div>
                                        <!--Widget body-->
                                        <div class="row pad-top">
                                            <div class="col-xs-6">
                                                <canvas id="demo-weather-lg-icon-2" width="98" height="98"></canvas>
                                            </div>
                                            <div class="col-xs-6">
                                                <p class="text-4x text-light">27&#176;</p>
                                                <p class="text-light">Partly Cloudy Day</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Large weather widget-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-body np">
                                        <!--Chat widget-->
                                        <!--===================================================-->
                                        <!--Widget body-->
                                        <div id="demo-chat-body" class="collapse in">
                                            <div class="nano" style="height:380px">
                                                <div class="nano-content pad-all">
                                                    <ul class="list-unstyled media-block">
                                                        <li class="mar-btm">
                                                            <div class="media-left">
                                                                <img src="img/av1.png" class="img-circle img-sm" alt="Profile Picture">
                                                            </div>
                                                            <div class="media-body pad-hor speech-left">
                                                                <div class="speech">
                                                                    <a href="ui-widgets.html#" class="media-heading">John Doe</a>
                                                                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit . </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="mar-btm">
                                                            <div class="media-right">
                                                                <img src="img/av4.png" class="img-circle img-sm" alt="Profile Picture">
                                                            </div>
                                                            <div class="media-body pad-hor speech-right">
                                                                <div class="speech">
                                                                    <a href="ui-widgets.html#" class="media-heading">Lucy Doe</a>
                                                                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit . </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="mar-btm">
                                                            <div class="media-left">
                                                                <img src="img/av1.png" class="img-circle img-sm" alt="Profile Picture">
                                                            </div>
                                                            <div class="media-body pad-hor speech-left">
                                                                <div class="speech">
                                                                    <a href="ui-widgets.html#" class="media-heading">John Doe</a>
                                                                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="mar-btm">
                                                            <div class="media-right">
                                                                <img src="img/av4.png" class="img-circle img-sm" alt="Profile Picture">
                                                            </div>
                                                            <div class="media-body pad-hor speech-right">
                                                                <div class="speech">
                                                                    <a href="ui-widgets.html#" class="media-heading">Lucy Doe</a>
                                                                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit . </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="mar-btm">
                                                            <div class="media-right">
                                                                <img src="img/av4.png" class="img-circle img-sm" alt="Profile Picture">
                                                            </div>
                                                            <div class="media-body pad-hor speech-right">
                                                                <div class="speech">
                                                                    <a href="ui-widgets.html#" class="media-heading">Lucy Doe</a>
                                                                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit . </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="mar-btm">
                                                            <div class="media-left">
                                                                <img src="img/av1.png" class="img-circle img-sm" alt="Profile Picture">
                                                            </div>
                                                            <div class="media-body pad-hor speech-left">
                                                                <div class="speech">
                                                                    <a href="ui-widgets.html#" class="media-heading">John Doe</a>
                                                                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="mar-btm">
                                                            <div class="media-right">
                                                                <img src="img/av4.png" class="img-circle img-sm" alt="Profile Picture">
                                                            </div>
                                                            <div class="media-body pad-hor speech-right">
                                                                <div class="speech">
                                                                    <a href="ui-widgets.html#" class="media-heading">Lucy Doe</a>
                                                                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="mar-btm">
                                                            <div class="media-left">
                                                                <img src="img/av1.png" class="img-circle img-sm" alt="Profile Picture">
                                                            </div>
                                                            <div class="media-body pad-hor speech-left">
                                                                <div class="speech">
                                                                    <a href="ui-widgets.html#" class="media-heading">John Doe</a>
                                                                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!--Widget footer-->
                                            <div class="panel-footer">
                                               <div class="input-group">
                                                  <input type="text" class="form-control" placeholder="Enter your message here...">
                                                     <span class="input-group-btn">
                                                        <button class="btn btn-info" type="button">Send</button>
                                                     </span>
                                               </div>
                                            </div>
                                        </div>
                                        <!--===================================================-->
                                        <!--Chat widget-->
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-12 col-md-6 col-xs-12">
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel text-center">
                                    <div class="panel-body bg-primary pad-ver">
                                        <i class="fa fa-facebook fa-5x"></i>
                                    </div>
                                    <div class="panel-footer">
                                        <ul class="nav nav-section nav-justified">
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 12.5k </div>
                                                    <p class="mar-no">Followers</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 1853 </div>
                                                    <p class="mar-no">Following</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 3451 </div>
                                                    <p class="mar-no">Tweets</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel text-center">
                                    <div class="panel-body bg-warning pad-ver">
                                        <i class="fa fa-dollar fa-5x"></i>
                                    </div>
                                    <div class="panel-footer">
                                        <ul class="nav nav-section nav-justified">
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 12.5k </div>
                                                    <p class="mar-no">Followers</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 1853 </div>
                                                    <p class="mar-no">Following</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 3451 </div>
                                                    <p class="mar-no">Tweets</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--===================================================-->
                            </div>
                            <div class="col-lg-4 col-sm-12 col-md-6 col-xs-12">
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel text-center">
                                    <div class="panel-body bg-info pad-ver">
                                        <i class="fa fa-twitter fa-5x"></i>
                                    </div>
                                    <div class="panel-footer">
                                        <ul class="nav nav-section nav-justified">
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 12.5k </div>
                                                    <p class="mar-no">Followers</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 1853 </div>
                                                    <p class="mar-no">Following</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 3451 </div>
                                                    <p class="mar-no">Tweets</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel text-center">
                                    <div class="panel-body bg-danger pad-ver">
                                        <i class="fa fa-comments-o fa-5x"></i>
                                    </div>
                                    <div class="panel-footer">
                                        <ul class="nav nav-section nav-justified">
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 12.5k </div>
                                                    <p class="mar-no">Followers</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 1853 </div>
                                                    <p class="mar-no">Following</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 3451 </div>
                                                    <p class="mar-no">Tweets</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--===================================================-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Recent Member </h3>
                                    </div>
                                    <div class="panel-body">
                                       <div class="media">
                                            <div class="media-left">
                                                <a href="ui-widgets.html#">
                                                <img class="media-object" data-src="holder.js/32x32" alt="64x64" src="http://placehold.it/40x40/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Harry Jones</h4>
                                                Managing Partner at MDD	Follow
                                            </div>
                                            <div class="media-right">
                                                <button class="btn btn-danger">Follow</button>
                                            </div>
                                        </div>
                                       <div class="media">
                                            <div class="media-left">
                                                <a href="ui-widgets.html#">
                                                <img class="media-object" data-src="holder.js/32x32" alt="64x64" src="http://placehold.it/40x40/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Harry Jones</h4>
                                                Managing Partner at MDD	Follow
                                            </div>
                                            <div class="media-right">
                                                <button class="btn btn-danger">Follow</button>
                                            </div>
                                        </div>
                                       <div class="media">
                                            <div class="media-left">
                                                <a href="ui-widgets.html#">
                                                <img class="media-object" data-src="holder.js/32x32" alt="64x64" src="http://placehold.it/40x40/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Harry Jones</h4>
                                                Managing Partner at MDD	Follow
                                            </div>
                                            <div class="media-right">
                                                <button class="btn btn-danger">Follow</button>
                                            </div>
                                        </div>
                                       <div class="media">
                                            <div class="media-left">
                                                <a href="ui-widgets.html#">
                                                <img class="media-object" data-src="holder.js/32x32" alt="64x64" src="http://placehold.it/40x40/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Harry Jones</h4>
                                                Managing Partner at MDD	Follow
                                            </div>
                                            <div class="media-right">
                                                <button class="btn btn-danger">Follow</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Tag Group </h3>
                                    </div>
                                    <div class="panel-body pad-no">
                                      <ul class="list-group">
                                        <li class="list-group-item"> <span class="badge badge-primary">14</span> Entertainment </li>
                                        <li class="list-group-item"> <span class="badge badge-success">9</span> Movies </li>
                                        <li class="list-group-item"> <span class="badge badge-info">11</span> TV Shows </li>
                                        <li class="list-group-item"> <span class="badge badge-warning">18</span> Celebs &amp; Gossip </li>
                                        <li class="list-group-item"> <span class="badge badge-danger">22</span> Video Games </li>
                                        <li class="list-group-item"> <span class="badge badge-alert">9</span> Sports &amp; Events </li>
                                      </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Newsletter Widget </h3>
                                    </div>
                                    <div class="panel-body">
                                      <p> Sign up for AdminDesigns Newsletter. </p>
                                        <div class="input-group">
                                           <input type="text" class="form-control" placeholder="Enter your message here...">
                                             <span class="input-group-btn">
                                                 <button class="btn btn-info" type="button">Send</button>
                                             </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel tagcloud-widget">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Newsletter Widget </h3>
                                    </div>
                                    <div class="panel-body">
                                       <span class="label label-primary">Photoshop</span>
                                       <span class="label label-primary">Fireworks</span>
                                       <span class="label label-primary">Dreamweaver</span>
                                       <span class="label label-primary">Sublime</span>
                                       <span class="label label-primary">Firefox</span>
                                       <span class="label label-primary">Chrome</span>
                                       <span class="label label-primary">Microsoft</span>
                                       <span class="label label-primary">Apple</span>
                                       <span class="label label-primary">Google</span>
                                       <span class="label label-primary">Facebook</span>
                                       <span class="label label-primary">Twitter</span>
                                       <span class="label label-primary">LinkedIn</span>
                                       <span class="label label-primary">Design</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--===================================================-->
                    <!--End page content-->
                </section>
                <!--===================================================-->
                <!--END CONTENT CONTAINER-->
                <!--MAIN NAVIGATION-->
                <!--===================================================-->
                <nav id="mainnav-container">
                    <div id="mainnav">
                        <!--Menu-->
                        <!--================================-->
                        <div id="mainnav-menu-wrap">
                            <div class="nano">
                                <div class="nano-content">
                                    <ul id="mainnav-menu" class="list-group">
                                        <!--Category name-->
                                        <li class="list-header">Navigation</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="javascript:void(0)">
                                            <i class="fa fa-home"></i>
                                            <span class="menu-title">Dashboard</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="index.html"><i class="fa fa-caret-right"></i> Homepage V1</a></li>
                                                <li><a href="dashboard-v2.html"><i class="fa fa-caret-right"></i> Homepage V2</a></li>
                                                <li><a href="dashboard-v3.html"><i class="fa fa-caret-right"></i> Homepage V3</a></li>
                                            </ul>
                                        </li>
                                        <!--Category name-->
                                        <li class="list-header">Components</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html#">
                                            <i class="fa fa-briefcase"></i>
                                            <span class="menu-title">UI Elements</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="ui-animation.html"><i class="fa fa-caret-right"></i> CSS3 Animation </a></li>
                                                <li><a href="ui-panel.html"><i class="fa fa-caret-right"></i> Panel </a></li>
                                                <li><a href="ui-xeditable.html"><i class="fa fa-caret-right"></i> Xeditable </a></li>
                                                <li><a href="ui-button.html"><i class="fa fa-caret-right"></i> Buttons </a></li>
                                                <li><a href="ui-fontawesome.html"><i class="fa fa-caret-right"></i> Fontawesome </a></li>
                                                <li><a href="ui-icons.html"><i class="fa fa-caret-right"></i> Icons </a></li>
                                                <li><a href="ui-components.html"><i class="fa fa-caret-right"></i> Components </a></li>
                                                <li><a href="ui-timeline.html"><i class="fa fa-caret-right"></i> Timeline </a></li>
                                                <li><a href="ui-nested-lists.html"><i class="fa fa-caret-right"></i> Nested Lists </a></li>
                                                <li><a href="ui-grids.html"><i class="fa fa-caret-right"></i> Grids </a></li>
                                                <li><a href="ui-tab.html"><i class="fa fa-caret-right"></i> Tab </a></li>
                                                <li><a href="ui-accordions.html"><i class="fa fa-caret-right"></i> Accordions </a></li>
                                                <li><a href="ui-dragdrop.html"><i class="fa fa-caret-right"></i> Draggable Panel</a></li>
                                                <li><a href="ui-typography.html"><i class="fa fa-caret-right"></i> Typography </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html#">
                                            <i class="fa fa-file"></i>
                                            <span class="menu-title">Pages</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="pages-faq.html"><i class="fa fa-caret-right"></i> FAQ </a></li>
                                                <li><a href="pages-gallery.html"><i class="fa fa-caret-right"></i> Gallery </a></li>
                                                <li><a href="pages-directory.html"><i class="fa fa-caret-right"></i> Directory </a></li>
                                                <li><a href="pages-profile.html"><i class="fa fa-caret-right"></i> User Profile </a></li>
                                                <li><a href="pages-invoice.html"><i class="fa fa-caret-right"></i> Invoice </a></li>
                                                <li><a href="pages-login.html"><i class="fa fa-caret-right"></i> Login </a></li>
                                                <li><a href="pages-register.html"><i class="fa fa-caret-right"></i> Register </a></li>
                                                <li><a href="pages-password-reminder.html"><i class="fa fa-caret-right"></i> Password Reminder </a></li>
                                                <li><a href="pages-lock-screen.html"><i class="fa fa-caret-right"></i> Lock Screen </a></li>
                                                <li><a href="pages-404.html"><i class="fa fa-caret-right"></i> 404 Error </a></li>
                                                <li><a href="pages-500.html"><i class="fa fa-caret-right"></i> 500 Error </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html#">
                                            <i class="fa fa-table"></i>
                                            <span class="menu-title">Tables</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="table-static.html"><i class="fa fa-caret-right"></i> Static Table <span class="label label-info pull-right">New</span></a></li>
                                                <li><a href="table-datatable.html"><i class="fa fa-caret-right"></i> Datatable Table </a></li>
                                                <li><a href="table-footable.html"><i class="fa fa-caret-right"></i> Footable Table </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html#">
                                            <i class="fa fa-edit"></i>
                                            <span class="menu-title">Forms</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="forms-layout.html"><i class="fa fa-caret-right"></i> Form Layout </a></li>
                                                <li><a href="forms-switchery.html"><i class="fa fa-caret-right"></i> Form Switchery </a></li>
                                                <li><a href="forms-components.html"><i class="fa fa-caret-right"></i> Form Components </a></li>
                                                <li><a href="forms-validation.html"><i class="fa fa-caret-right"></i> Form Validation </a></li>
                                                <li><a href="forms-wizard.html"><i class="fa fa-caret-right"></i> Form Wizard </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html#">
                                            <i class="fa fa-line-chart"></i>
                                            <span class="menu-title">Charts</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="charts-flot.html"><i class="fa fa-caret-right"></i> Flot Chart </a></li>
                                                <li><a href="charts-morris.html"><i class="fa fa-caret-right"></i> Morris Chart </a></li>
                                            </ul>
                                        </li>
                                        <li class="list-divider"></li>
                                        <!--Category name-->
                                        <li class="list-header">Extra</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="calendar.html">
                                            <i class="fa fa-calendar"></i>
                                            <span class="menu-title">
                                            Calendar
                                            </span>
                                            </a>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html">
                                            <i class="fa fa-flask"></i>
                                            <span class="menu-title">
                                               Widgets
                                            <span class="label label-pink pull-right">New</span>
                                            </span>
                                            </a>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html#">
                                            <i class="fa fa-envelope-o"></i>
                                            <span class="menu-title">Mail</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="mail-inbox.html"><i class="fa fa-caret-right"></i> Inbox </a></li>
                                                <li><a href="mail-compose.html"><i class="fa fa-caret-right"></i> Compose </a></li>
                                                <li><a href="mail-mailview.html"><i class="fa fa-caret-right"></i> Mail View </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html#">
                                            <i class="fa fa-map-marker"></i>
                                            <span class="menu-title">
                                            Maps
                                            <span class="label label-mint pull-right">New</span>
                                            </span>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="maps-gmap.html">Google Maps</a></li>
                                                <li><a href="maps-vectormap.html">Vector Maps</a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html#">
                                            <i class="fa fa-plus-square"></i>
                                            <span class="menu-title">Menu Level</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li class="list-divider"></li>
                                                <li>
                                                    <a href="ui-widgets.html#">Third Level<i class="arrow"></i></a>
                                                    <!--Submenu-->
                                                    <ul class="collapse">
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="ui-widgets.html#">Third Level<i class="arrow"></i></a>
                                                    <!--Submenu-->
                                                    <ul class="collapse">
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li class="list-divider"></li>
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-widgets.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <!--Widget-->
                                    <!--================================-->
                                    <div class="mainnav-widget">
                                        <!-- Show the button on collapsed navigation -->
                                        <div class="show-small">
                                            <a href="ui-widgets.html#" data-toggle="menu-widget" data-target="#demo-wg-server">
                                            <i class="fa fa-desktop"></i>
                                            </a>
                                        </div>
                                        <!-- Hide the content on collapsed navigation -->
                                        <div id="demo-wg-server" class="hide-small mainnav-widget-content">
                                            <ul class="list-group">
                                                <li class="list-header pad-no pad-ver">Server Status</li>
                                                <li class="mar-btm">
                                                    <span class="label label-primary pull-right">15%</span>
                                                    <p>CPU Usage</p>
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar progress-bar-primary" style="width: 15%;">
                                                            <span class="sr-only">15%</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <span class="label label-purple pull-right">75%</span>
                                                    <p>Bandwidth</p>
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar progress-bar-purple" style="width: 75%;">
                                                            <span class="sr-only">75%</span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--================================-->
                                    <!--End widget-->
                                </div>
                            </div>
                        </div>
                        <!--================================-->
                        <!--End menu-->
                    </div>
                </nav>
                <!--===================================================-->
                <!--END MAIN NAVIGATION-->
                <!--ASIDE--> 
                <!--===================================================-->
                <aside id="aside-container">
                    <div id="aside">
                        <div class="nano closed">
                            <div class="nano-content">
                                <div class="fade in active">
                                    <h4 class="pad-hor text-thin"> Online Members (7) </h4>
                                    <ul class="list-group bg-trans">
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av4.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Scott Owens</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av5.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Melissa Hunt</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!--===================================================--> 
                <!--END ASIDE-->
                <!--RIGHT CHAT MESSANGER--> 
                <!--===================================================-->
                <aside class="conversation closed">
                    <div class="nano">
                        <div class="nano-content">
                            <div class="media">
                                <div class="media-left"> <a href="javascript:void(0)" class="conversation-toggle"> <i class="fa fa-angle-left"></i></a> </div>
                                <div class="media-body text-center">
                                    <h4 class="media-heading">John smith</h4>
                                    <p class="text-sm">Online</p>
                                </div>
                            </div>
                            <div class="chat-window">
                                <form class="form">
                                    <div class="floating-label">
                                        <textarea id="sidebarChatMessage" placeholder="Leave a message" rows="2" class="form-control autosize" name="sidebarChatMessage"></textarea>
                                        <label for="sidebarChatMessage"></label>
                                    </div>
                                </form>
                                <div class="msg_container_base">
                                    <div class="msg_container base_sent">
                                        <div class="col-md-9 col-xs-9">
                                            <div class="messages msg_sent">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av1.png" alt=""> </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-md-9 col-xs-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_container base_sent">
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_sent">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av1.png" alt=""> </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh?</p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!--END RIGHT CHAT MESSANGER--> 
                <!--===================================================-->
            </div>
            <!-- FOOTER -->
            <!--===================================================-->
            <footer id="footer">
                <!-- Visible when footer positions are fixed -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="show-fixed pull-right">
                    <ul class="footer-list list-inline">
                        <li>
                            <p class="text-sm">SEO Proggres</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                            </div>
                        </li>
                        <li>
                            <p class="text-sm">Online Tutorial</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                            </div>
                        </li>
                        <li>
                            <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                        </li>
                    </ul>
                </div>
                <!-- Visible when footer positions are static -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="hide-fixed pull-right pad-rgt">Currently v2.2</div>
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <p class="pad-lft">&#0169; 2015 Your Company</p>
            </footer>
            <!--===================================================-->
            <!-- END FOOTER -->
            <!-- SCROLL TOP BUTTON -->
            <!--===================================================-->
            <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
            <!--===================================================-->
        </div>
        <!--===================================================-->
        <!-- END OF CONTAINER -->
        <!--JAVASCRIPT-->
        <!--=================================================-->
        <!--jQuery [ REQUIRED ]-->
        <script src="js/jquery-2.1.1.min.js"></script>
        <!--jQuery UI [ REQUIRED ]-->
        <script src="js/jquery-ui.min.js"></script>
        <!--BootstrapJS [ RECOMMENDED ]-->
        <script src="js/bootstrap.min.js"></script>
        <!--Fast Click [ OPTIONAL ]-->
        <script src="plugins/fast-click/fastclick.min.js"></script>
        <!--Easy Pie Chart [ OPTIONAL ]-->
        <script src="plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>
        <!--Jquery Nano Scroller js [ REQUIRED ]-->
        <script src="plugins/nanoscrollerjs/jquery.nanoscroller.min.js"></script>
        <!--Metismenu js [ REQUIRED ]-->
        <script src="plugins/metismenu/metismenu.min.js"></script>
        <!--Jasmine Admin [ RECOMMENDED ]-->
        <script src="js/scripts.js"></script>
        <!--Switchery [ OPTIONAL ]-->
        <script src="plugins/switchery/switchery.min.js"></script>
        <!--Bootstrap Select [ OPTIONAL ]-->
        <script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
        <!--Skycons [ OPTIONAL ]-->
        <script src="plugins/skycons/skycons.min.js"></script>
        <!--Bootstrap Tags Input [ OPTIONAL ]-->
        <script src="plugins/tag-it/tag-it.min.js"></script>
        <!--Flot Chart [ OPTIONAL ]-->
        <script src="plugins/flot-charts/jquery.flot.min.js"></script>
        <script src="plugins/flot-charts/jquery.flot.resize.min.js"></script>
        <script src="plugins/flot-charts/jquery.flot.spline.js"></script>
        <script src="plugins/moment/moment.min.js"></script>
        <script src="plugins/moment-range/moment-range.js"></script>
        <script src="plugins/flot-charts/jquery.flot.tooltip.min.js"></script>
        <!--Flot Order Bars Chart [ OPTIONAL ]-->
        <script src="plugins/flot-charts/jquery.flot.categories.js"></script>
        <!--Summernote [ OPTIONAL ]-->
        <script src="plugins/summernote/summernote.min.js"></script>
        <!--Fullscreen jQuery [ OPTIONAL ]-->
        <script src="plugins/screenfull/screenfull.js"></script>
        <!--Gmaps [ OPTIONAL ]-->
        <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
        <script src="plugins/gmaps/gmaps.js"></script>
        <!--Demo script [ DEMONSTRATION ]-->
        <script src="js/demo/widgets.js"></script>
    </body>
</html>